<script setup>
import { onMounted, inject, onUnmounted } from 'vue'
import { LineLayer, Popup } from '@antv/l7'
import api from '@/axios/smart_city'
import Wuhan_bridge from "../../GIS_DATA/Wuhan_bridge.json"

let map, scene, bridgeLayer, popup

const initLayer = async () => {
  // let res = await api.getBridges()
  let res = Wuhan_bridge
  bridgeLayer = new LineLayer({name: "武汉桥梁"})
    .source(res)
    .shape('arc3d')
    .size(10)
    .color('name', ['red', 'blue', 'green', 'yellow'])
    .active(true)
  scene.addLayer(bridgeLayer)
  bridgeLayer.on('click', (e) => {
    popup.setOptions({
      title: e.feature.properties.name,
      html: e.feature.properties.info,
      lngLat: {
        lng: e.lnglat.lng,
        lat: e.lnglat.lat
      }
    })
  })
}
onMounted(() => {
  ({ map, scene } = inject('mapScene'))
  popup = new Popup({})
  scene.addPopup(popup)
  map.flyTo({
    center: [114.28709707233946, 30.5153549830341],
    zoom: 12,
    speed: 2,
    pitch: 39,
    bearing: 0
  })
  initLayer()
})

onUnmounted(() => {
  scene.removeLayer(bridgeLayer)
  scene.removePopup(popup)
})
</script>

<template>

</template>

<style lang="scss">

</style>
